<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				background: red;
				height: 30px;
				width: 30px;
			}
		</style>
	</head>

	<body>
		<div id="box"></div>
		<script src="../jquery-1.12.4.min.js"></script>
		<script>
			var ele = $('#box');
			$(document).keydown(function() {
				var opt = event.which;
				var left = ele.offset().left;
				var top = ele.offset().top;
				switch(opt) {
					case 37:
						ele.offset({
							top: top,
							left: left - 1
						});
						break;
					case 38:
						ele.offset({
							top: top-1,
							left: left
						});
						break;
					case 39:
						ele.offset({
							top: top,
							left: left+1
						});
						break;
					case 40:
						ele.offset({
							top: top+1,
							left: left
						});
						break;	
				}
			})
		</script>
	</body>

</html>